@extends('admin.huawei')
@section('content')

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <h1>
                商品管理
                <small>商品添加</small>
            </h1>
            <ol class="breadcrumb">
                <li><a href="#"><i class="fa fa-dashboard"></i> 后台主页</a></li>
                <li><a href="#">商品管理</a></li>
                <li class="active">商品添加</li>
            </ol>
        </section>

        <!-- Main content -->
        <section class="content">
            <div class="row">
                <!-- left column -->
                <div class="col-md-12">
                    <!-- general form elements -->
                    <div class="box box-primary">
                        <div class="box-header with-border">
                            <h3 class="box-title">快速商品添加</h3>
                        </div><!-- /.box-header -->
                        <!-- 警告框 -->
                    @if(count($errors) > 0)             
                    <div class="alert alert-danger alert-dismissable">
                        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×
                        </button>
                        <h4><i class="icon fa fa-ban"></i> 警告!</h4>
                            <ol>
                                @foreach ($errors -> all() as $error)
                                <li>{{ $error }}</li>
                                @endforeach
                            </ol>
                    </div>          
                    @endif
                    @if(session('info'))
                                <div  class="alert alert-danger alert-dismissable">
                                    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                                    <h4>    <i class="icon fa fa-check"></i> 警告!</h4>
                                    {{ session('info') }}
                                </div>
                    @endif
                        <!-- form start -->
                        <form role="form" action="{{ url('/admin/cygoods/insertgoods') }}" method="post" enctype="multipart/form-data">
                            {{ csrf_field() }}
                            <div class="box-body">
                                <div class="form-group">
                                    <label for="exampleInputEmail1">商品名称</label>
                                    <input type="text" value="{{ old('name') }}" name='name' class="form-control" id="exampleInputEmail1" placeholder="请输入商品名称" style="width:400px;">
                                </div>
                                <div class="form-group">
                                    <label for="exampleInputEmail1">商品颜色</label>
                                    <input type="text" value="{{ old('goodscolor') }}" name='goodscolor' class="form-control" id="exampleInputEmail1" placeholder="请输入商品颜色" style="width:400px;">
                                </div>
                                <div class="form-group">
                                    <label for="exampleInputEmail1">商品参数</label>
                                    <input type="text" value="{{ old('parameter') }}" name='parameter' class="form-control" id="exampleInputEmail1" placeholder="请输入商品参数(16G,32G,64G,128G)" style="width:400px;">
                                </div>
                                 <div class="form-group">
                                    <label for="exampleInputEmail1">商品参数介绍</label>
                                    <input type="text" value="{{ old('introduce') }}" name='introduce' class="form-control" id="exampleInputEmail1" placeholder="请输入商品参数介绍" style="width:400px;">
                                </div>
                                <div class="form-group">
                                    <label for="exampleInputEmail1">商品价格</label>
                                    <input type="text" value="{{ old('price') }}" name='price' class="form-control" id="exampleInputEmail1" placeholder="请输入商品价格" style="width:400px;">
                                </div>
                                <div class="form-group">
                                    <label for="exampleInputEmail1">商品数量</label>
                                    <input type="text" value="{{ old('num') }}" name='num' class="form-control" id="exampleInputEmail1" placeholder="请输入商品数量" style="width:400px;">
                                </div>
                            </div><!-- /.box-body -->
                            <div class="form-group" style='width:400px;margin-bottom:15px;margin-left:10px'>
                                <select class="form-control select2 select2-hidden-accessible" style="width: 100%;" tabindex="-1" aria-hidden="true" name='pid'>
                                <option value='0' style='width:400px'>选择商品分类</option>
                                @foreach($data as $cygoods)
                                    <option value='{{ $cygoods -> id }}' style='width:400px'>{{ $cygoods -> name }}</option>
                                @endforeach
                                </select>
                            </div><!-- /.form-group -->
                               <div class="form-group">
                                <label for="exampleInputEmail1">展示图片</label>
                                    <a id="imgadd" style='margin-left:20px;height:50px;width:50px;line-height:0 auto'>继续添加</a>
                                    
                                    <div class="fileImg" id="fileImg">
                                        <ul id='addimg'>
                                            <li>
                                                <input type="file" name='img1' class="upfile" id="adfadfadsf">
                                                <span><img src="" alt=""></span>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                                <style type="text/css">
                                    .fileImg{padding:20px;background:#ececec;overflow:hidden;width:800px;}
                                    .fileImg ul li{position:relative;border:1px solid #c5c5c5;width:50px;height:50px;float:left;margin-right:50px;list-style-type:none;background:#f4f5f7;border-radius:5px;margin-bottom:10px;}
                                    .fileImg ul li input{position:absolute;z-index:3;top:0;left:0;width:100%;height:100%;opacity:0;-webkit-tap-highlight-color:rgba(0,0,0,0);margin-bottom:10px;}
                                    .fileImg ul li:after{position:absolute;content:' ';display:block;width:2px;height:30px;background:#cdcdcd;left:50%;margin-left:-1px;top:50%;margin-top:-15px;z-index:2;margin-bottom:10px;}
                                    .fileImg ul li:before{position:absolute;content:' ';display:block;top:50%;margin-top:-1px;z-index:2;width:30px;height:2px;background:#cdcdcd;left:50%;margin-left:-15px;}
                                    .fileImg ul li span:nth-child(2){display:none;width:50px;height:50px;position:absolute;left:0;top:0;background:#f4f5f7;cursor:pointer;border-radius:5px;overflow:hidden;z-index:3;margin-bottom:10px;}
                                    .fileImg ul li span:nth-child(2):after{content:'x';display:block;z-index:4;width:20px;height:20px;line-height:16px;color:#fff;background:red;border-radius:50%;position:absolute;left:50%;top:50%;margin-left:-10px;margin-top:-10px;text-align:center;margin-bottom:10px;}
                                    .fileImg ul li span:nth-child(2) img{width:100%;position:absolute;left:0;top:50%;margin-bottom:10px;}
                                </style>
                            </div>
                            <div class="form-group" style='margin-bottom:15px;margin-left:10px;margin-right:10px'>
                                    <label for="exampleInputEmail1">商品详情</label>
                                     <!-- 加载编辑器的容器 -->
                                    <script id="container" name="content" type="text/plain" style="height:300px">
                                        
                                    </script>
                                    <!-- 配置文件 -->
                                    <script type="text/javascript" src="{{ url('/ue/ueditor.config.js') }}"></script>
                                    <!-- 编辑器源码文件 -->
                                    <script type="text/javascript" src="{{ url('/ue/ueditor.all.js') }}"></script>
                                    <!-- 实例化编辑器 -->
                                    <script type="text/javascript">
                                        var ue = UE.getEditor('container');
                                    </script>
                            </div>
                            <div class="box-footer">
                            <button type="submit" class="btn btn-primary">商品添加</button>
                            </div>
                        </form>
                    </div><!-- /.box -->
                </div><!--/.col (left) -->
            </div>   <!-- /.row -->
        </section><!-- /.content -->
    </div><!-- /.content-wrapper -->
    <script src="{{ url('/up/jquery.js') }}"></script>
    <link rel="stylesheet" type="text/css" href="{{ url('/up/diyUpload/css/webuploader.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ url('/up/diyUpload/css/diyUpload.css') }}">
    <script type="text/javascript" src="{{ url('/up/diyUpload/js/webuploader.html5only.min.js') }}"></script>
    <script type="text/javascript" src="{{ url('/up/diyUpload/js/diyUpload.js') }}"></script>
<script type="text/javascript">
// 图片上传
    var obj = document.getElementById('fileImg');
    var ALi = obj.getElementsByTagName('li');
    addFn();
    function addFn(){
        for(var i=0;i<ALi.length;i++){
            ALi[i].getElementsByTagName('input')[0].index=i;
            ALi[i].getElementsByTagName('span')[0].index=i;
            // 文件域改变后执行
            ALi[i].getElementsByTagName('input')[0].onchange=function(){
                ALi[this.index].getElementsByTagName('span')[0].style.display='block'; //删除按钮显示
                var oImg = document.createElement('img'); // 创建img元素
                ALi[this.index].getElementsByTagName('span')[0].appendChild(oImg);
                oImg.src=getFileUrl(this);  //地址增加

                setTimeout(function(){  //图片高度居中
                    oImg.style.marginTop=-oImg.offsetHeight/2+'px';
                }, 100);
            };
            // 删除按钮事件
            ALi[i].getElementsByTagName('span')[0].onclick=function(){
                ALi[this.index].innerHTML='<input type="file" class="upfile" ><span></span>';
                addFn();
            };
        };
    };

    // 创建本地地址
    function getFileUrl(sourceId) { 
        var url; 
        if (navigator.userAgent.indexOf("MSIE")>=1) { // IE 
        url = sourceId.value; 
        } else if(navigator.userAgent.indexOf("Firefox")>0) { // Firefox 
        url = window.URL.createObjectURL(sourceId.files.item(0)); 
        } else if(navigator.userAgent.indexOf("Chrome")>0) { // Chrome 
        url = window.URL.createObjectURL(sourceId.files.item(0)); 
        } 
        return url; 
    };
    var res = 3;
    // 创建 img元素
    $("#imgadd").on('click', function(){
            
            var div = createDiv();
            //添加元素
            // $("#did").append(div);
            $(div).appendTo($("#addimg"));
        addFn();
        });

    // 创建img
    function createDiv()
        {
            //创建元素。
            var img = $('<li><input type="file"  class="upfile" name=img' + res +'><span></span></li>');
            res++;
            return img;
        }

    </script>
@endsection('content')